<template>
  <div>
    <!--头部区域开始-->
    <div style="height: 60px;  display:flex; background-color: #8888b3" >
      <div style="width:240px; display:flex; align-items:center; padding-left:10px">
        <img style="width:40px; height:40px; border-radius:50%; justify-content:flex-start" src="@/assets/imgs/logo.png" alt="logo">
        <span style="font-size:24px; font-weight:bold; margin-left:5px"><a href="/" class="logo-link" style="font-weight: bolder">校园交友平台</a></span>
      </div>
      <div style="flex: 1; display:flex; align-items:center; padding-left: 20px">
        <span style="margin-right: 5px; cursor: pointer" @click="router.push('/manager/home')">主页</span> /
        <span style="margin-left: 5px">{{ router.currentRoute.value.meta.name }}</span>
      </div>
      <div style="width:fit-content; display:flex; align-items: center; padding-right: 20px;">
        <el-dropdown>
           <div style="display:flex; align-items: center">
             <el-image v-if="data.user?.avatar" style="width: 30px; height: 30px; margin-right:5px; border-radius: 50%"  :src="data.user?.avatar" alt="manager"/>
             <img v-else style="width: 30px; height: 30px; margin-right:5px; border-radius: 50%" src="@/assets/imgs/manager.jpg" alt="manager">
             <span style="margin-right: 10px">{{ data.user?.name }}</span>
             <el-icon class="el-icon--right">
               <arrow-down />
             </el-icon>
           </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人主页</el-dropdown-item>

              <el-dropdown-item @click="router.push('/front/fronthome')">去前台</el-dropdown-item>
              <el-dropdown-item>我的关注</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!--头部区域结束-->
    <!--下方区域开始-->
    <div style="display:flex">
      <!--菜单区域开始-->
      <div style="width:240px; background-color: #8888b3;" >
        <el-menu router :default-openeds="['1','2']" default-active="/manager/home" style="min-height: calc(100vh - 60px)">
          <el-menu-item style="" index="/manager/home">
               <el-icon> <House /> </el-icon>
               <span>主页</span>
          </el-menu-item>
          <el-sub-menu index="1" >
            <template #title >
              <el-icon><Monitor /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/manager/notice" v-if="data.user.role === 'ADMIN'">系统公告</el-menu-item>
            <el-menu-item index="/manager/forum">论坛空间</el-menu-item>
            <el-menu-item index="/manager/written">发贴空间</el-menu-item>
            <el-menu-item index="/manager/comment">评论信息</el-menu-item>
            <el-menu-item index="/manager/category" v-if="data.user.role === 'ADMIN'">贴子分类</el-menu-item>
            <el-menu-item index="/manager/apply">审核信息</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2" v-if="data.user.role === 'ADMIN'" >
            <template #title >
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
              <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
              <el-menu-item index="/manager/user">用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>

      </div>
      <!--菜单区域结束-->
      <!--数据渲染区域开始-->
      <div style="flex: 1; width:0; padding:0; background-color: #ece2e2" >

        <RouterView @updatePerson="updatePerson"/>
      </div>
      <!--数据渲染区域结束-->

      <div></div>
    </div>
    <!--下方区域结束-->
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import {reactive} from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem("code_user") || "{}")
})

const logout = () => {
  localStorage.removeItem("code_user");
  router.push("/login");
}

const updatePerson = () => {
  data.user = JSON.parse(localStorage.getItem("code_user") || "{}");
}

</script>

<style>
.el-menu {
  background-color: #8888b3;
  border:none;
}
.el-menu-item {
  height: 50px;
  color: #ddd;
}
.el-sub-menu__title{
  height:50px;
  background-color: #8888b3;
  color: #ddd;
}
.el-menu .is-active{
  background-color: #537bee;
  color: #fff;
}
.el-sub-menu__title:hover{
  background-color: #879fe4;
}
.el-menu-item:not(.is-active):hover {
  background-color: #879fe4;
  color: #222;
}
.el-dropdown{
  cursor:pointer
}
.el-tooltip__trigger{
  outline:none;
}
.el-menu--inline .el-menu-item{
  padding-left:48px !important;
}
.logo-link {
  text-decoration: none;  /* 去除链接下划线 */
  color: inherit;        /* 继承父级文字颜色 */
}

.logo-link:hover {
  opacity: 0.8;          /* 悬停时透明效果 */
}
</style>